<template>
  <div ref="myRef" data-bs-toggle="tooltip" data-bs-placement="top"
       title="">
  </div>
</template>

<script>
import {ref, getCurrentInstance, onMounted} from 'vue'
import $ from "jquery";
import url from "@/router/api";
import {shuffle} from "@/util";

export default {
  name: "StatisticStateById",
  setup() {
    const {proxy} = getCurrentInstance()
    const myRef = ref(null)

    let ID = 0
    let name = new Array(2);
    let activeCount = new Array(2);
    let InActiveCount = new Array(2);

    onMounted(() => {
      renderChart();
    })

    let myChart = null

    const renderChart = () => {
      if (myChart === null) {
        myChart = proxy.$echarts.init(myRef.value)
      }

      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
        },
      });
    };
    setInterval(() => {
      if (myChart === null) {
        return
      }
      getAmountsNameById();

      myChart.setOption({
            title:{
              text: ID + " ID下的状态值"
            },
            xAxis: [
              {
                data: name,
              }
            ],
            yAxis: [
              {
                data: name
              }
            ],
            series: [
              {
                name: 'active',
                type: 'bar',
                data: activeCount
              },
              {
                name: 'inactive',
                type: 'bar',
                data: InActiveCount
              }
            ]
          }
      )
    }, 2000);

    const getAmountsNameById = () => {
      $.ajax({
        url: url.amountStatusById,
        type: "GET",
        success(resp) {
          if (resp.errorCode === "00000") {
            let tempArr = []
            shuffle(resp.data)
            for (let i = 0; i < 1; i++) {
              ID = resp.data[i].id;
              for (let amount of resp.data[i].amounts) {
                tempArr.push({
                  name: amount.name,
                  activeCount: amount.activeCount,
                  inactiveCount: amount.inactiveCount
                })
              }
            }
            shuffle(tempArr)
            while (tempArr.length > 10) {
              tempArr.shift()
            }
            name = []
            activeCount = []
            InActiveCount = []
            for (let tempArrElement of tempArr) {
              name.push(tempArrElement.name)
              activeCount.push(tempArrElement.activeCount)
              InActiveCount.push(tempArrElement.inactiveCount)
            }
          }
        },
        error(resp) {
          console.log(resp)
        }
      })
    };

    return {
      myRef,
    }
  }
}
</script>

<style scoped>

</style>